<template>
	<div>
		<wd-tabs v-model="tab" animated swipeable color="#d81e06" lineHeight=0px lineWidth=0px>

			<wd-tab title='热销好货'>
				<view class="content" v-for="i in list.slice(0, rexiaohaohuo_num)" :key="i.id">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
				<wd-loadmore :state="rexiaohaohuo_state" @reload="loadmore" />
			</wd-tab>
			<wd-tab title='新鲜蔬菜'>
				<view class="content" v-for="i in list.filter(item=>item.type._id=='6722f623974b297285d32686')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>
			<wd-tab title='时令水果'>
				<view class="content" v-for="i in list.filter(item=>item.type._id=='6722f4d5974b297285d32684')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>
			<wd-tab title='肉禽蛋类'>
				<view class="content" v-for="i in list.filter(item=>item.type._id=='6722f634974b297285d32688')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>
			<wd-tab title='酒水冲调'>
				<view class="content" v-for="i in list.filter(item=>item.type._id=='6722f65d974b297285d32690')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>
			<wd-tab title='粮油调味'>
				<view class="content" v-for="i in list.filter(item=>item.type._id=='6722f648974b297285d3268c')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>
			<wd-tab title='休闲食品'>
				<view class="content" v-for="i in list.filter(item=>item.type._id=='6722f650974b297285d3268e')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>
			<wd-tab title='海鲜水产'>
				<view class="content" v-for="i in list.filter(item=>item.type._id=='6722f63e974b297285d3268a')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>
			<wd-tab title='白用日货'>
				<view class="content" v-for="i in list.filter(item=>item.type._id=='6722f666974b297285d32692')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>
			<wd-tab title='女装衣服'>
				<view class="content" v-for="i in list.filter(item=>item.type._id=='')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>
			<wd-tab title='男装衣服'>
				<view class="content" v-for="i in list.filter(item=>item.type._id=='')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>
			<wd-tab title='宠物零食'>
				<view class="content" v-for="i in list.filter(item=>item.type._id=='')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>
			<wd-tab title='医疗设备' >
				<view class="content" v-for="i in list.filter(item=>item.type._id=='')">
					<view class="one">
						<div class="img_src" @click="goShop(i)">
							<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
						</div>
						<div class="shop_con">
							<div class="" style="width: 90%; color: gray; ">
								{{i.name}}
							</div>
							<div>
								<button
									style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

							</div>
							<div>
								<button
									style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
							</div>
							<div style="display: flex; justify-content: space-between; width: 95%;">
								<div>
									<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
									<span
										style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
								</div>
								<div>
									<wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
								</div>
							</div>
						</div>
					</view>
				</view>
			</wd-tab>


		</wd-tabs>
	</div>
</template>

<script setup lang="ts">
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
const user_id = ref(localStorage.getItem('user_id'));
	import {ref} from 'vue'
	name: "Shoplist"
	const tab = ref('1')
	import {useMainStore} from '@/store/index';
	const userinfo = useMainStore()
	import {storeToRefs} from 'pinia'
	const {list} = storeToRefs(userinfo)
	// console.log(list)
	const rexiaohaohuo_state=ref<string>('loading')
	const rexiaohaohuo_num=ref<number>(2)
	const rexiaohaohuo_max=ref<number>(list.value.length)
		onReachBottom(() => {
  if (rexiaohaohuo_num.value === rexiaohaohuo_max.value) {
    rexiaohaohuo_state.value = 'error'
  } else if (rexiaohaohuo_num.value < rexiaohaohuo_max.value) {
    loadmore()
  } else if (rexiaohaohuo_num.value >= rexiaohaohuo_max.value) {
    rexiaohaohuo_state.value = 'finished'
  }
})
onLoad(() => {
  loadmore()
})
function loadmore() {
  setInterval(() => {
    rexiaohaohuo_num.value = rexiaohaohuo_num.value + 2
    rexiaohaohuo_state.value = 'loading'
	if(rexiaohaohuo_num.value >= rexiaohaohuo_max.value){
		rexiaohaohuo_state.value = 'finished'
	}
  }, 2000)
}

import { addshopcar } from '@/utils/api';
import { useshopcar } from '@/store/shopcar.ts'; //获取store
const shopcar = useshopcar();
const { shopcarlist } = storeToRefs(shopcar);
const addcart = async (a) => {
	
  let data = await addshopcar({
    shop_id: a._id,
    user_id: user_id.value,
   
  });
  
  shopcarlist.value = data.data;
};
import {useNowShopStore} from "@/store/now_shop"
import {storeToRefs} from 'pinia'

import {shop_search} from '@/utils/api.ts'
const nowShopStore = useNowShopStore()
function  goShop(an:any){
	// console.log(an)
	nowShopStore.setShop(an)
	uni.navigateTo({
	  url: "/pages/TypePages/shop_main/shop_main" // 跳转到对应路径的页面
	});
	
}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 300rpx;
		margin: 0 auto;
		background-color: #f0f0f0;

		.one {
			width: 95%;
			height: 300rpx;
			margin: 0 auto;
			background-color: white;
			display: flex;
			justify-content: space-around;

			.img_src {
				width: 30%;
				height: 90%;

				margin: auto;
			}

			.shop_con {
				width: 65%;
				height: 90%;
				margin: auto;

			}
		}
	}
</style>